
<script>
// 所有表单配置项
import { globalConfig } from "./formConfig.js";
export default {
  data() {
    return {
      activeName: "leftTool",
      modelValue: {},
      options: {},
      dialogVisible: false,
    };
  },
  watch: {
    options: {
      deep: true,
      handler(value) {
        clearTimeout(this.setTimer);
        this.setTimer = setTimeout(() => {
          this.$emit("initLoadOptions", value);
        }, 300);
      },
    },
  },
  methods: {
    handleClick(value) {
      console.log(value);
    },
  },
  render(h) {
    const viewJson = (
      <el-dialog
        title="提示"
        top="5vh"
        visible={this.dialogVisible}
        {...{
          on: {
            "update:visible": (dialogVisible) => {
              this.dialogVisible = dialogVisible;
            },
          },
        }}
        width="60%"
      >
        <div style="max-height:80vh;overflow: auto">
          <json-viewer
            value={this.options}
            expand-depth="5"
            copyable={{
              copyText: "复制",
              copiedText: "已复制",
              timeout: 1500,
            }}
            boxed
            sort
          ></json-viewer>
        </div>
      </el-dialog>
    );
    const optionsList = [
      {
        label: "左侧工具栏",
        name: "leftTool",
        component: () =>
          import(/* webpackChunkName: "group-foo" */ "./leftTool"),
      },
      {
        label: "右侧工具栏",
        name: "rightTool",
        component: () =>
          import(/* webpackChunkName: "group-foo" */ "./rightTool"),
      },
    ];
    return (
      <div class="tool_class">
        <y-form
          {...{
            on: {
              // 类型选择的时候将options清空并且给一个当前对应默认配置项
              formChange: ({ options: { optionsList }, value }) => {
                this.options = optionsList.find(
                  (item) => item.id === value
                ).defaultOptions;
              },
              seeJson: () => {
                this.dialogVisible = true;
              },
            },
          }}
          formConfig={globalConfig}
          modelValue={this.modelValue}
        />
        <yTabs
          style="height: calc(100% - 50px)"
          options={this.options}
          onHandleClick={this.handleClick}
          v-model={this.activeName}
          optionsList={optionsList}
        />
        {viewJson}
      </div>
    );
  },
};
</script>

<style lang="scss" scoped>
.tool_class {
  height: 100%;
}
</style>